<template>
  <div>
    <h1 class="titleH1">智慧健康服务平台</h1>
    <personnel-information
      @alertHide="hideInfo"
      :prop='prop'
    ></personnel-information>
    <div id="allmap"></div>
    <div class="position">
      <div class="searchCriteria">
        <a-cascader
          :options="options"
          @change="onChangeXZQ"
          placeholder="请选择行政区"
          changeOnSelect
          :loadData="loadData"
        />
        <a-input
          style="width:auto; margin-left:20px"
          @click.native="showModalSQ"
          v-model="shequMC"
          placeholder="请选择社区"
        ></a-input>
        <a-modal
          centered
          title="社区"
          :visible="visibleSQ"
          @ok="handleOkSQ"
          @cancel="handleCancelSQ"
          width="900px"
        >
          <a-row :gutter="24">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :span="14">
                    <a-form-item label="社区名称">
                      <a-input placeholder="请输入" v-model="searchSQ" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <span
                      style="float: left;overflow: hidden;"
                      class="table-page-search-submitButtons"
                    >
                      <a-button type="primary" icon="search" @click.native="search()">查询</a-button>
                      <a-button
                        type="primary"
                        icon="reload"
                        @click.native="reset()"
                        style="margin-left: 8px"
                      >重置</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form>
            </div>
            <a-table
              bordered
              rowKey="id"
              :columns="columnsSQ"
              :dataSource="dataSQ"
              :loading="loading"
              :pagination="false"
            >
              <template slot="action" slot-scope="text, record">
                <a @click="() => seve(record)">选择</a>
              </template>
            </a-table>
            <a-pagination
              style="margin-top:20px;float:right"
              :defaultCurrent="1"
              :total="total"
              @change="onChangeSQ"
            />
          </a-row>
        </a-modal>
        <!-- 时间选择器 -->
        <div class="block">
          <el-date-picker
            v-model="prop.value3"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="time"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <!-- 图表数据 6个-->
    <div class="chartList">
      <div class="chartRight">
        <!-- 驿站折线图 -->
        <div class="chartCon" v-if="checkboxData[3].checkbox">
          <div class="demo">
            <div class="card">
              <h1>驿站折线图</h1>
              <div id="posthouse" style="width:100%; height:220px;"></div>
            </div>
          </div>
        </div>
        <!-- 驿站分布情况 -->
        <div class="chartCon" v-if="checkboxData[4].checkbox">
          <div class="demo">
            <div class="card p-con">
              <h1>驿站分布情况</h1>
              <ul>
                <li>
                  <div>行政区</div>
                  <div>驿站数</div>
                  <div>会员数</div>
                </li>
                <li v-for="(item,index) in pConList" :key="index">
                  <div>{{item.mingCheng}}</div>
                  <div>{{item.number}}</div>
                  <div>{{item.count}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="chartLeft">
        <!-- 告警趋势 -->
        <div class="chartCon" v-if="checkboxData[0].checkbox">
          <div class="demo">
            <div class="card">
              <h1>告警趋势</h1>
              <div id="alarmTrend" style="width:100%; height:220px;"></div>
            </div>
          </div>
        </div>
        <!-- 告警人员数据 -->
        <div class="chartCon" v-if="checkboxData[1].checkbox">
          <div class="demo">
            <div class="card">
              <div class="personnelData">
                <h1>告警人员数据</h1>
                <ul>
                  <li>
                    <div>姓名</div>
                    <div>联系方式</div>
                    <img src alt />
                  </li>
                  <li v-for="(item,index) in personnelList" :key="index">
                    <div @click="person(item.yongHuZhuJian,item.jianKangZhuJian)">{{item.xingMing}}</div>
                    <div>{{item.dianHua}}</div>
                    <img src alt />
                  </li>
                </ul>
                <div class="paging">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-size="page.pageSize"
                    layout="prev, pager, next"
                    background
                    :total="page.total"
                    @prev-click="prevClick"
                    @next-click="nextClick"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 年龄分组统计图 -->
        <div class="chartCon" v-if="checkboxData[2].checkbox">
          <div class="demo">
            <div class="card">
              <h1>年龄分组统</h1>
              <div id="ageGroup" style="width:100%; height:220px;"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <!-- 控制面板从屏幕左边划出 -->
    <div class="controlPanel">
      <a-button type="primary" @click="showDrawer">控制面板</a-button>
      <a-drawer
        title="控制面板"
        :placement="placement"
        :closable="false"
        :visible="visible"
        @close="onClose"
      >
        <!-- <img src="~@/assets/img/cha1.png" class="img" alt=""> -->
        <div class="img">收起</div>
        <div class="showCon">
          <h2>定制地图显示信息</h2>
          <div class="checkboxs">
            <a-checkbox @change="yz">驿站</a-checkbox>
            <a-checkbox @change="ry">人员</a-checkbox>
          </div>
          <div class="radios" v-if="yzHiden">
            <a-radio-group name="radioGroup" @change="tw">
              <a-radio
                v-for="(item, index) in radioData"
                :key="index"
                :value="item.value"
              >{{item.label}}</a-radio>
            </a-radio-group>
          </div>
        </div>
        <h2 style="margin-top:30px;">定制图标</h2>

        <a-checkbox
          default-checked
          v-for="(item, index) in checkboxData"
          :key="index"
          :value="item.value"
          @change="onChanges"
        >{{item.label}}</a-checkbox>
        <!-- <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span> -->
      </a-drawer>
    </div>
  </div>
</template>
<script>
import {
  pieChartAjax,
  brokenLineAjax,
  personnelAjax,
  posthouseAjax,
  administrativeRegion,
  community,
  posthouseListAjax,
  mapPosthouseAjax,
  mapPersonnelAjax
} from "@/api/index";
import personnelInformation from "./information.vue";
export default {
  components: { personnelInformation },
  data() {
    return {
     
      prop:{
         idPersonnel: "", //告警人员id（用于查询个人详情）
          infos: false, //个人详情是否展示
          typeOfHealth: "", //健康监测历史数据所需(控制面板人員下的值),
          value3: ['2020-05-06 00:00:00','2020-05-14 00:00:00'],   //开始时间结束时间[xxxx,xxxx]
      },
      yzHiden: false, //控制单选框是否显示
      yzcheck: false, //驿站是否选中
      // 控制面板
      visible: false,
      placement: "left",
      radioData: [
        { label: "体温", value: "0", type: "1" },
        { label: "心率", value: "1", type: "2" },
        { label: "BMI", value: "2", type: "3" },
        { label: "血氧", value: "3", type: "4" },
        { label: "血压", value: "4", type: "5" }
      ],
      checkboxData: [
        { label: "告警趋势", value: "0", checkbox: true },
        { label: "告警人员信息", value: "1", checkbox: true },
        { label: "年龄分组", value: "2", checkbox: true },
        { label: "驿站人数统计折线图", value: "3", checkbox: true },
        { label: "行政区与驿站人数统计列表", value: "4", checkbox: true }
      ],
      value: [],
      shequID: "",
      shequMC: undefined,
      visibleSQ: false,
      loading: true,
      searchSQ: "",
      dataSQ: [],
      options: [],
      total: 0,
      xzqID: undefined,
      columnsSQ: [
        { title: "社区名称", dataIndex: "mingCheng", align: "center" },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          width: 120,
          scopedSlots: { customRender: "action" }
        }
      ],
      // 时间选择器
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      // echarts数据
      echartsList: {
        ageGroupList: [], //年龄分组
        alarmTrendList: {
          //告警趋势
          tdata: [], //数据种类
          xdata: [], //横轴数据
          sdata: [] //值
          // y: []
        },
        chroniP_Data: [],
        posthouseList: {
          tdata: [], //数据种类
          xdata: [], //横轴数据
          sdata: [] //值
        }
      },

      // 分页
      page: {
        currentPage: 1,
        pageSize: 4,
        total: 0
      },
      // 告警人员数据
      personnelList: [],
      // 驿站分布情况
      pConList: [],
      xzqAllCod: "",
      // 地图驿站覆盖物
      mapPosthouseData: [],
      // 地图人员覆盖物
      mapPersonnelData: [],
      
    };
  },
  mounted() {
    // sessionStorage.setItem("daytime", JSON.stringify(this.prop.value3)); //设置临时时间区间
    this.xingzhengqulList();
    this.echartsData();
    this.map();
  },
  methods: {
    hideInfo(data) {
      this.prop.infos = data;
    },
    tw(e) {
      // this.checkboxData[value].checkbox = !this.checkboxData[value].checkbox;
      let type = this.radioData[e.target.value].type;
      this.prop.typeOfHealth = type;
      this.mapPersonnelList(type);
    },
    // 驿站
    yz(e) {
      if (e.target.checked) {
        if (this.rycheck) {
          this.rycheck = true;
        } else {
          this.yzHiden = false;
        }

        this.markPointList();
      } else {
        if (this.rycheck) {
          this.rycheck = true;
        }
        this.mapPosthouseData = [];
        this.map();
      }
    },
    ry(e) {
      if (e.target.checked) {
        this.rycheck = true;
        this.yzHiden = true;
      } else {
        this.yzHiden = false;
      }
    },
    // 控制面板
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    onChanges(e) {
      var value = e.target.value;
      this.checkboxData[value].checkbox = !this.checkboxData[value].checkbox;
      this.echartsData();
    },
    echartsData() {
      this.personne(); //告警人员
      this.ageGroup(); //年龄分组
      this.alarmTrend(); //告警趋势
      this.posthouse(); //驿站人数统计
      this.mapPersonnelList();
      this.posthouseCon(); //驿站分布情况
      if (this.yzcheck) {
        this.markPointList();
      }
    },
    // 行政区
    onChangeXZQ(value) {
      // this.xzqAllCod=''
      if (value.length == 1) {
        this.xzqAllCod = "";
      }
      this.xzqID = value[value.length - 1];
      this.shequID = undefined;
      this.shequMC = undefined;
      this.louyuID = undefined;
      this.louyuMC = undefined;
      this.fangjianID = undefined;
      this.fangjianMC = undefined;
      if (value.length == 4) {
        this.echartsData();
      }
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      this.xzqAllCod += selectedOptions[selectedOptions.length - 1].value + "-";
      administrativeRegion({
        pid: selectedOptions[selectedOptions.length - 1].value,
        lavel: selectedOptions[selectedOptions.length - 1].lavel
      }).then(res => {
        if (res.success) {
          targetOption.children = []; //先重置空
          for (let i = 0; i < res.result.length; i++) {
            targetOption.children.push(res.result[i]);
          }
          this.options = [...this.options];
        }
      });
    },
    xingzhengqulList() {
      administrativeRegion({
        pid: 0,
        lavel: 0
      }).then(res => {
        if (res.success) {
          this.options = res.result;
        }
      });
    },
    // 弹窗
    showModalSQ() {
      this.visibleSQ = true;
      this.searchSQ = "";
      if (this.xzqID) {
        community({
          xingZhengQvId: this.xzqID,
          pageNo: 1,
          pageSize: 5
        }).then(res => {
          if (res.success) {
            this.dataSQ = res.result.records;
            this.total = res.result.total;
            this.loading = false;
          }
        });
      } else {
        this.dataSQ = [];
        this.total = 0;
        this.loading = false;
      }
    },
    // 社区确定
    handleOkSQ(e) {
      this.visibleSQ = false;
    },
    // 取消
    handleCancelSQ(e) {
      this.visibleSQ = false;
    },
    // 重置
    reset() {
      this.searchSQ = "";
    },
    // 时间选择器
    time() {
      //设置临时时间选择会话
      sessionStorage.setItem("daytime", JSON.stringify(this.prop.value3)); //设置临时时间区间
      this.echartsData();
    },
    // 选择
    seve(row) {
      this.shequID = row.id;
      this.shequMC = row.mingCheng;
      this.visibleSQ = false;
      if (this.shequID) {
        this.echartsData();
      }
    },
    // 查询
    search() {
      let obj = {
        pageNo: 1,
        pageSize: 5
      };
      if (this.searchSQ) {
        obj.sheQvMingCheng = this.searchSQ;
      } else {
        obj.xingZhengQvId = this.xzqID;
      }
      community(obj).then(res => {
        if (res.success) {
          this.dataSQ = res.result.records;
          this.total = res.result.total;
          this.loading = false;
        }
      });
    },
    // 分页
    onChangeSQ(pageNumber) {
      let obj = {
        pageNo: pageNumber,
        pageSize: 5
      };
      if (this.searchSQ) {
        obj.sheQvMingCheng = this.searchSQ;
      } else {
        obj.xingZhengQvId = this.xzqID;
      }
      community(obj).then(res => {
        if (res.success) {
          this.dataSQ = res.result.records;
          this.loading = false;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize;
      this.personne(); //告警人员
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage;
      this.personne(); //告警人员
    },
    //调用年龄分组统计图
    ageGroup: function(e) {
      this.echartsList.ageGroupList = [];
      pieChartAjax().then(res => {
        if (res.code == 0) {
          //this.echartsList.ageGroupList = res.result;
          for (var i = 0; i < res.result.length; i++) {
            let obj = {};
            obj.name = res.result[i].description;
            obj.value = res.result[i].number;
            this.echartsList.ageGroupList.push(obj);
          }
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("ageGroup"),
            "dark"
          );

          // 指定图表的配置项和数据
          var option = {
            backgroundColor: "#2c343c",

            title: {
              text: "",
              left: "center",
              top: 20,
              textStyle: {
                color: "#ccc"
              }
            },

            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
              show: false,
              min: 80,
              max: 600,
              inRange: {
                colorLightness: [0, 1]
              }
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: this.echartsList.ageGroupList.sort(function(a, b) {
                  return a.value - b.value;
                }),
                roseType: "radius",
                label: {
                  color: "rgba(255, 255, 255, 0.3)"
                },
                labelLine: {
                  lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                },
                itemStyle: {
                  color: "#c23531",
                  shadowBlur: 200,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                },

                animationType: "scale",
                animationEasing: "elasticOut",
                animationDelay: function(idx) {
                  return Math.random() * 200;
                }
              }
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize", function() {
            myChart.resize();
          });
        } else {
          this.$notify.error({
            title: "系统提示",
            message: res.message
          });
        }
      });
    },
    // 驿站分布情况列表
    posthouseCon(e) {
      console.log(this.xzqAllCod);
      let list = this.xzqAllCod.substr(0, this.xzqAllCod.length - 1);
      if (this.xzqID) {
        list = this.xzqAllCod + this.xzqID;
      }
      let obj = {
        startTime: this.prop.value3[0],
        endTime: this.prop.value3[1],
        sheQvId: this.shequID,
        code: list
      };

      posthouseListAjax(obj).then(res => {
        if (res.code == 200) {
          this.pConList = res.result;
        }
      });
    },
    // 掉用告警趋势统计图
    alarmTrend: function(e) {
      let obj = {
        startTime: this.prop.value3[0],
        endTime: this.prop.value3[1],
        source: "1",
        sheQvId: this.shequID,
        code: this.xzqID
      };
      brokenLineAjax(obj).then(res => {
        if (res.code == 200) {
          let that = this;
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("alarmTrend"),
            "dark"
          );
          that.echartsList.alarmTrendList.xdata = []; //先重置空 横轴
          that.echartsList.alarmTrendList.sdata = []; //先重置空 具体值
          that.echartsList.alarmTrendList.tdata = []; //先重置空 类型
          // 数组重构
          if (res.result != null) {
            for (let i = 0; i < res.result.length; i++) {
              that.echartsList.alarmTrendList.tdata.push(res.result[i].name); //赋值种类
              var numArr = []; //定义一个空数组
              for (let j = 0; j < res.result[i].data.length; j++) {
                if (i == 0) {
                  //取第一条数据的日期作为横坐标
                  that.echartsList.alarmTrendList.xdata.push(
                    res.result[i].data[j].date
                  );
                }
                numArr.push(res.result[i].data[j].number);
              }
              let obj = {};
              obj.name = res.result[i].name;
              obj.type = "line";
              obj.data = numArr;
              obj.markPoint = {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" }
                ]
              };
              obj.markLine = {
                data: [{ type: "average", name: "平均值" }]
              };
              that.echartsList.alarmTrendList.sdata.push(obj);
            }
            var option = {
              title: { text: "" },
              tooltip: { trigger: "axis" },
              legend: { data: that.echartsList.alarmTrendList.tdata },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: !1,
                  data: that.echartsList.alarmTrendList.xdata
                }
              ],
              yAxis: [{ type: "value", axisLabel: { formatter: "{value}" } }],
              series: that.echartsList.alarmTrendList.sdata
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function() {
              myChart.resize();
            });
          }
        } else {
          this.$notify.error({
            title: "系统提示",
            message: res.message
          });
        }
      });
    },
    // 调用警告人员数据
    personne: function(e) {
      let obj = {
        startTime: this.prop.value3[0],
        endTime: this.prop.value3[1],
        sheQvId: this.shequID,
        code: this.xzqID?this.xzqID:110000,
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize
      };
      personnelAjax(obj).then(res => {
        if (res.code == 200) {
          this.page.total = res.result.total;
          this.personnelList = res.result.rows;
          
        }
      });
    },
    // 告警人员数据单人详情
    person(val,value) {
      this.prop.idPersonnel = val;
      this.prop.infos = true;
      this.prop.jianKangId = value;
    },
    //驿站人数统计折现图
    posthouse: function(e) {
      let obj = {
        startTime: this.prop.value3[0],
        endTime: this.prop.value3[1],
        sheQvId: this.shequID,
        code: this.xzqID
      };
      posthouseAjax(obj).then(res => {
        if (res.code == 200) {
          let that = this;
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("posthouse"),
            "dark"
          );
          that.echartsList.posthouseList.xdata = []; //先重置空 横轴
          that.echartsList.posthouseList.sdata = []; //先重置空 具体值
          that.echartsList.posthouseList.tdata = []; //先重置空 类型
          // 数组重构
          for (let i = 0; i < res.result.length; i++) {
            if (res.result[i].add) {
              that.echartsList.posthouseList.tdata.push(res.result[i].add); //赋值种类
            } else if (res.result[i].total) {
              that.echartsList.posthouseList.tdata.push(res.result[i].total); //赋值种类
            }
            var numArr = []; //定义一个空数组
            for (let j = 0; j < res.result[i].data.length; j++) {
              if (i == 0) {
                //取第一条数据的日期作为横坐标
                that.echartsList.posthouseList.xdata.push(
                  res.result[i].data[j].jiGouMingCheng
                );
              }
              numArr.push(res.result[i].data[j].number);
            }
            console.log(that.echartsList.posthouseList.xdata);
            let obj = {};
            obj.name = res.result[i].name;
            obj.type = "line";
            obj.data = numArr;
            obj.markPoint = {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            };
            obj.markLine = {
              data: [{ type: "average", name: "平均值" }]
            };
            that.echartsList.posthouseList.sdata.push(obj);
          }
          var option = {
            title: { text: "" },
            tooltip: { trigger: "axis" },
            legend: { data: that.echartsList.posthouseList.tdata },
            xAxis: [
              {
                type: "category",
                boundaryGap: !1,
                data: that.echartsList.posthouseList.xdata
              }
            ],
            yAxis: [{ type: "value", axisLabel: { formatter: "{value}" } }],
            series: that.echartsList.posthouseList.sdata
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize", function() {
            myChart.resize();
          });
        } else {
          this.$notify.error({
            title: "系统提示",
            message: res.message
          });
        }
      });
    },

    // 地图显示驿站覆盖物
    markPointList: function() {
      let obj = {
        startTime: this.prop.value3[0],
        endTime: this.prop.value3[1],
        sheQvId: this.shequID,
        code: this.xzqID
      };
      mapPosthouseAjax(obj).then(res => {
        console.log("地图显示驿站覆盖物");
        console.log(res.result);
        if (res.code == 200) {
          this.mapPosthouseData = res.result;
          this.map();
        }
      });
    },
    // 地图人员覆盖物
    mapPersonnelList: function(type) {
      let obj = {
        startTime: this.prop.value3[0],
        endTime: this.prop.value3[1],
        sheQvId: this.shequID,
        code: "110000",
        type: type
      };
      mapPersonnelAjax(obj).then(res => {
        console.log("地图显示人员覆盖物");
        console.log(res.result);
        if (res.code == 200) {
          this.mapPersonnelData = res.result;

          this.map();
        }
      });
    },
    // 分页上一页下一页
    prevClick: function(val) {
      this.page.currentPage = val;
    },
    nextClick: function(val) {
      this.page.currentPage = val;
    },
    map() {
      // 百度地图API功能
      var map = new BMap.Map("allmap");
      map.centerAndZoom(
        new BMap.Point(
          this.mapPosthouseData.length != 0
            ? this.mapPosthouseData[0].lng
            : 116.350658,
          this.mapPosthouseData.length != 0
            ? this.mapPosthouseData[0].lat
            : 39.938285
        ),
        14
      );
      //添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      );
      //  鼠标滚动放大缩小
      setTimeout(function() {
        map.setZoom(14);
      }, 2000);
      map.enableScrollWheelZoom(true);
      // 鼠标点击获取经纬度
      map.addEventListener("click", function(e) {
        //e.stopPropagation();
        alert(e.point.lng + "," + e.point.lat);
      });
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6, //图标缩放大小
        strokeColor: "#fff", //设置矢量图标的线填充颜色
        strokeWeight: "2" //设置线宽
      });
      var icons = new BMap.IconSequence(sy, "10", "30");
      // 创建polyline对象
      var pois = [
        new BMap.Point(116.350658, 39.938285),
        new BMap.Point(116.386446, 39.939281),
        new BMap.Point(116.411833, 39.941448),
        new BMap.Point(116.442501, 39.914603),
        new BMap.Point(116.378129, 39.92817)
      ];

      var polyline = new BMap.Polyline(pois, {
        enableEditing: false, //是否启用线编辑，默认为false
        enableClicking: true, //是否响应点击事件，默认为true
        icons: [icons],
        strokeWeight: "8", //折线的宽度，以像素为单位
        strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
        strokeColor: "#18a45b" //折线颜色
      });
      map.addOverlay(polyline);
      // 编写自定义函数,创建标注
      function addMarker(point) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
      }
      for (var i = 0; i < pois.length; i++) {
        var point = new BMap.Point(pois[i].lng, pois[i].lat);
        addMarker(point);
      }
      // // // 驿站覆盖物
      for (var j = 0; j < this.mapPosthouseData.length; j++) {
        var point = new BMap.Point(
          this.mapPosthouseData[j].lng,
          this.mapPosthouseData[j].lat
        );
        var myIcon = new BMap.Icon(
          "https://gkak-file.oss-cn-beijing.aliyuncs.com/jian-kang-cai-ji/e1386716-b64b-4d8d-b74f-a4ddb30470c5/yiZhan.png",
          new BMap.Size(200, 150)
        );
        myIcon.setImageSize(new BMap.Size(40, 40)); //设置图标大小
        var markerPosthouse = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(markerPosthouse);
      }
      // // 人员覆盖物
      for (var z = 0; z < this.mapPersonnelData.length; z++) {
        var point = new BMap.Point(
          this.mapPersonnelData[z].lng,
          this.mapPersonnelData[z].lat
        );
        var myIcon = new BMap.Icon(
          "https://gkak-file.oss-cn-beijing.aliyuncs.com/jian-kang-cai-ji/5769bdf1-d557-4378-8502-e397ad4d7965/gaoJing.png",
          new BMap.Size(200, 150)
        );
        myIcon.setImageSize(new BMap.Size(40, 40)); //设置图标大小
        var markerPosthouse = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(markerPosthouse);
        //清除覆盖物
        function remove_overlay() {
          map.clearOverlays();
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.titleH1 {
  width: 100%;
  height: 80px;
  background: gray;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 80px;
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 300;
}
#allmap {
  height: 100vh;
  width: auto;
}
.position {
  position: absolute;
  top: 9%;
  left: 15%;
  .searchCriteria {
    display: flex;
    align-items: center;
    .el-select,
    .block {
      margin-left: 40px;
    }
  }
}
.chartList {
  .chartLeft,
  .chartRight {
    position: absolute;
    top: 13%;
    width: 15%;
    z-index: 20;
    h1 {
      margin: 0;
    }
    .demo {
      position: relative;
      height: 240px;
      background-color: rgba(0, 0, 0, 0.8);
      margin-top: 30px;
      h1 {
        padding-top: 10px;
      }
      .p-con {
        ul {
          width: 90%;
          margin: auto;

          li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            div {
              width: 33%;
              text-align: center;
            }
          }
        }
      }
      .card {
        color: #fff;
        font-size: 18px;
        h1 {
          color: #fff;
          text-align: center;
        }

        // 告警人员数据
        .personnelData {
          width: 90%;
          margin: auto;
          color: #fff;

          ul {
            width: 100%;
            margin-bottom: 0;
            font-size: 14px;
            li {
              display: flex;
              align-items: center;
              height: 30px;
              line-height: 33px;
              img {
                width: 50px;
                height: 50px;
              }
              div {
                width: 50%;
              }
              div:nth-of-type(2) {
                margin-left: 20%;
              }
            }
          }
          .paging {
            color: #333;
            text-align: center;
          }
        }
      }
    }
  }
  .chartLeft {
    left: 2%;
  }
  .chartRight {
    right: 2%;
  }
  .clear {
    clear: both;
  }
}
// 控制面板
.controlPanel {
  position: absolute;
  top: 9%;
}
>>> .paging {
  position: absolute;
  bottom: 10px;
}
.img {
  position: fixed;
  left: 13%;
  top: 0px;
  width: 60px;
  color: #333;
  background: #fff;
  text-align: center;
  border-radius: 5px;
  height: 33px;
  line-height: 33px;
}
>>> .anchorTR {
  position: fixed !important;
  top: 9.5% !important;
  right: 2%;
  left: 5% !important;
  z-index: 300 !important;
}
</style>